<template>
    <div>
        <div>
            <div class="dh" @click="tzback()"> <p class="head"> &lt; 休闲/娱乐</p></div>
            <div>
                <van-search
                        v-model="seamsg"
                        show-action
                        placeholder="请输入搜索关键词"
                />
            </div>
        </div>
        <div @click="tzlist()">
            <van-grid :border="false" :column-num="5" >
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/am.png?Expires=1745392704&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=m7iM439P47QpMhABfEjTR7%2BoytE%3D"/>
                    <p>按摩/足浴</p>
                </van-grid-item>
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/xy.png?Expires=1745392833&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=ezgmrN802tPKBl%2BxE8H1VY9WPBo%3D"/>
                    <p>洗浴/汗蒸</p>
                </van-grid-item>
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/ktv.png?Expires=1745392904&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=0ZuIHTGp3sFwgY9%2F%2BsR2W08NfCQ%3D"/>
                    <p>KTV</p>
                </van-grid-item>
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/jb.png?Expires=1745392967&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=8Z10S%2FVEHQN9bCOp3EAndaswbH4%3D"/>
                    <p>酒吧</p>
                </van-grid-item>
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/js.png?Expires=1745393016&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=nVU51c5to%2FOIHxp%2BInPo2%2BPmkTw%3D"/>
                    <p>健身/运动</p>
                </van-grid-item>
            </van-grid>
            <van-grid :border="false" :column-num="5" id="xqty">
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/xqty.png?Expires=1745393089&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=wsuI0F%2BSQXUy2%2BF%2FQBjaB93cqdE%3D"/>
                    <p>新奇体验</p>
                </van-grid-item>
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/cg.png?Expires=1745393142&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=DJQrPu%2FWv2fAuvohJv%2BSyOm2KWk%3D"/>
                    <p>茶馆</p>
                </van-grid-item>
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/div.png?Expires=1745393224&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=BnGlUV7%2BJWsdhaXYtthfs16%2Bn5g%3D"/>
                    <p>DIY手工坊</p>
                </van-grid-item>
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/hpg.png?Expires=1745393268&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=tDnQn5jlJtgOhIqxzNGSdtYNKKc%3D"/>
                    <p>轰趴馆</p>
                </van-grid-item>
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/njl.png?Expires=1745393310&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=EdTQT7XzLZ2jN4ROUr1j6kCATys%3D"/>
                    <p>采摘农家乐</p>
                </van-grid-item>
            </van-grid>
            <van-grid :border="false" :column-num="5">
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/ms.png?Expires=1745393371&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=IWAgjMRxFsYPeSVvZ41GbRLqAo8%3D"/>
                    <p>密室</p>
                </van-grid-item>
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/yy.png?Expires=1745393416&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=yib75fPfVvCHeTg7LdZhTVYIJEI%3D"/>
                    <p>游泳</p>
                </van-grid-item>
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/whys.png?Expires=1745393455&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=H9PQHd3fs7ZPsUlemGhKQ5CR75Y%3D"/>
                    <p>文化艺术</p>
                </van-grid-item>
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/ylyy.png?Expires=1745393505&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=l5WKC97CLBmV3zMtoDJr1qe4WrQ%3D"/>
                    <p>游乐游艺</p>
                </van-grid-item>
                <van-grid-item>
                    <img src="http://kqoss.oss-cn-beijing.aliyuncs.com/qb.png?Expires=1745393547&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=NYKzNgjsPytLxdd6tz5H%2BrwB%2BTg%3D"/>
                    <p>全部</p>
                </van-grid-item>
            </van-grid>
        </div>
        <div>
            <div>
                <van-divider content-position="left">全城精选</van-divider>
                <van-row gutter="10" >
                    <van-col span="24" v-for="p in play">
                        <van-card
                                :price="p.price+'/人'"
                                :desc="p.detail"
                                :title="p.title"
                                :thumb="p.imgurl"
                                @click="tzdetail(p.id)"
                        >
                            <template #tags>
                                <van-tag plain type="danger">{{p.tag1}}</van-tag>
                                <van-tag plain type="danger">{{p.tag2}}</van-tag>
                            </template>
                            <template #footer>
                                <van-rate v-model="value" />：3分
                            </template>
                        </van-card>
                    </van-col>
                </van-row>
                <van-divider content-position="left">郑州玩乐榜</van-divider>
                <van-row gutter="10">
                    <van-col span="24" v-for="p in play">
                        <van-card
                                :price="p.price+'/人'"
                                :desc="p.detail"
                                :title="p.title"
                                :thumb="p.imgurl"
                                @click="tzdetail(p.id)"
                        >
                            <template #tags>
                                <van-tag plain type="danger">{{p.tag1}}</van-tag>
                                <van-tag plain type="danger">{{p.tag2}}</van-tag>
                            </template>
                            <template #footer>
                                <van-rate v-model="value" />：3分
                            </template>
                        </van-card>
                    </van-col>
                </van-row>
            </div>
        </div>
    </div>
</template>

<script>
    import { ref } from 'vue';
    export default {
        name: "Play",
        data(){
            return{
                play:{},
            }
        },
        mounted(){
            this.axios.get("/api/play/query.do").then(res=>{
                if(res.data.code==200){
                    this.play=res.data.data;
                }
            });
        },
        setup() {
            const value = ref(3);
            return { value };
        },
        methods:{
            tzback(){
                history.back();
            },
            tzlist(){
                this.$router.push({path:"/playlist"});
            },
            tzdetail(id){
                //跳转页面 传递参数 编程式路由 携带参数
                this.$router.push({path:"/playdetail",query:{id:id}});
            }
        },

    }
</script>

<style scoped>
.dh{
    height: 3rem;
}
.head{
    padding-top: 1rem;
    text-align: left;
    font-size: 18px;
}
p{
    font-size: 12px;
}
#xqty{
    top: -5px;
}
</style>